<template>
  <view>
    <view id="topBox">
      <van-search
        :value="value"
        shape="round"
        background="white"
        placeholder="请输入搜索关键词"
      />
      <view id="placeOnOff">
        <view id="placeText">⭐成都世豪广场店</view>
        <view id="onOffBtn">
          <text>自取</text>
          <van-switch
            id="switch"
            @change="onChange"
            :checked="checked"
            active-color="pink"
            inactive-color="skyblue"
            size="24px"
          />
          <text>外卖</text>
        </view>
      </view>
      <view id="moreText">
        <van-collapse :value="activeNames" @change="textShow($event)">
          <van-collapse-item title="💡灵感咖啡，喜茶出品......" name="1">
            <view id="contentText">
              💡灵感咖啡，喜茶出品。 雪山香草拿铁，雪山摩卡新上市..............
            </view>
          </van-collapse-item>
        </van-collapse>
      </view>
    </view>
    <!-- --------------------侧边导航-------------------------------- -->
    <scroll-view id="mainBox">
      <view id="topUnderBox"></view>
      <view id="contentBox">
        <van-sidebar id="leftsidebar" :active-key="activeKey">
          <scroll-view id="leftNav" scroll-y="true" :scroll-top="leftTop">
            <van-sidebar-item
              @click="leftItemClick(index)"
              v-for="(item, index) in leftNav"
              :key="index"
              :title="item.name"
            />
            <view class="liubaiBox"></view>
          </scroll-view>
        </van-sidebar>
        <scroll-view
          id="rightShow"
          scroll-y="true"
          @scroll="scroll"
          :scroll-top="scrollTop"
        >
          <!-- ----------------swiper轮播------------------------------------ -->
          <template>
            <view class="uni-padding-wrap">
              <view class="page-section swiper">
                <view class="page-section-spacing">
                  <swiper
                    class="swiper"
                    circular="true"
                    :interval="interval"
                    :indicator-dots="point"
                    :autoplay="autoplay"
                    :duration="duration"
                  >
                    <swiper-item v-for="item in banner1" :key="item.id">
                      <view class="swiper-item">
                        <image :src="item.imgSrc"></image>
                      </view>
                    </swiper-item>
                  </swiper>
                </view>
              </view>
            </view>
          </template>
          <template>
            <view class="uni-padding-wrap">
              <view class="page-section swiper">
                <view class="page-section-spacing">
                  <swiper
                    class="swiper"
                    circular="true"
                    :interval="interval"
                    :indicator-dots="point"
                    :autoplay="autoplay"
                    :duration="duration"
                  >
                    <swiper-item v-for="item in banner2" :key="item.id">
                      <view class="swiper-item">
                        <image :src="item.imgSrc"></image>
                      </view>
                    </swiper-item>
                  </swiper>
                </view>
              </view>
            </view>
          </template>
          <!-- ----------------------具体饮品------------------------------ -->
          <view
            v-for="item in goodsArr"
            :key="item.id"
            class="rightItem"
            @click="learnMore(item.id, $event)"
          >
            <view class="itemImg">
              <image :src="item.imgSrc"></image>
            </view>
            <view class="itemText">
              <view class="itemName">{{ item.name }}</view>
              <view v-if="item.hint != null" class="itemHint">{{
                item.hint
              }}</view>
              <view v-else class="itemHintReplace"></view>
              <view class="itemRmark">{{ item.remark }}</view>
              <view class="itemPriceBox">
                <text v-show="item.price != null ? true : false">
                  ￥{{ item.price }}
                </text>
                <view
                  class="stepperNone"
                  :class="{ stepper: item.price != null }"
                >
                  <text
                    v-if="item.reduceShow"
                    class="symbol"
                    @click.stop="numReduce(item.id)"
                    >-</text
                  >
                  <text v-show="item.reduceShow" id="itemNumBox">{{
                    item.num
                  }}</text>
                  <text class="symbol" @click.stop="numPlus(item.id)">+</text>
                </view>
              </view>
            </view>
          </view>
          <view class="liubaiBox"></view>
        </scroll-view>
      </view>
    </scroll-view>
    <!-- ----------------------购物袋-------------------- -->
    <view
      v-show="isShopArrNone"
      @click="shopBoxShow"
      id="shoppingBox"
      :style="'height:' + shopBoxHeight"
    >
      <scroll-view v-if="shopScrollShow" id="shopArrScroll" scroll-y="true">
        <view class="shopArrItem" v-for="(item, index) in shopArr" :key="index">
          <view class="shopItemImg">
            <image :src="item.imgSrc"></image>
          </view>
          <view class="shopItemText">
            <view>{{ item.name }}</view>
            <view>
              <text class="shopItemPrice">甜度:{{ item.sugar }}</text>
              <text class="shopItemPrice">温度:{{ item.temperature }}</text>
              <text class="shopItemPrice">数量:{{ item.num }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
      <view v-else class="fullPrice">总价￥{{ sumPrice }}</view>
      <view id="shopIcon" :style="'top:' + iconTop">
        <image src="/static/百货.png"></image>
      </view>
      <view id="shopClose" @click.stop="shopBoxClose">↓</view>
      <view id="clean" @click="cleanShop">清空</view>
      <view id="gopayBtn" @click.stop="goPay" :style="'width:' + gopayWidth"
        >结算</view
      >
    </view>
    <!-- --------------------------弹出模态框------------------------------------------- -->
    <van-popup
      class="motaitall"
      :show="show"
      custom-style="height: 90%;border-radius: 15rpx;"
      @close="bsonClose"
      closeable
      v-for="item in popuplist"
      :key="item.id"
      :v-if="show"
    >
      <view class="motaiimg">
        <image mode="fill" class="imgtitall" :src="item.imgSrc" alt />
      </view>
      <scroll-view scroll-y class="titlebox">
        <text class="title_name">{{ item.name }}</text>
        <view class="title_leixing">{{ item.hint }}</view>
        <view class="title_miaoshu">产品描述</view>
        <view class="title_neirong">{{ item.remark }}</view>
        <!--  -->
        <!-- 单选操作 -->
        <view class="danxuanzhuangtai">状态</view>
        <view class="list">
          <block v-for="(v, index) in items" :key="v.value">
            <view
              class="li"
              :class="v.checked ? 'cur' : ''"
              :data-index="index"
              :data-value="v.value"
              @click="tmpChoose"
            >
              <label class="ti">{{ v.value }}</label>
            </view>
          </block>
        </view>
        <view class="danxuanzhuangtai">甜度</view>
        <view class="list">
          <block v-for="(v, index) in itemstow" :key="v.value">
            <view
              class="li"
              :class="v.checked ? 'cur' : ''"
              :data-index="index"
              :data-value="v.value"
              @click="sugarChoose"
            >
              <label class="ti">{{ v.value }}</label>
            </view>
          </block>
        </view>
        <!--  -->
      </scroll-view>
      <view class="footerbox">
        <text class="qian">￥{{ myprice }}</text>
        <view class="duoshaoqian">
          <view
            class="duoshaoqian_jieshao"
            v-for="item in selVal"
            :key="item.sugar"
            >{{ item.temperature }},{{ item.sugar }}</view
          >
          <van-stepper
            disable-input="true"
            button-size="20px"
            class="jishuqi"
            :value="steppervalue"
            @plus="myplus"
            @minus="myminus"
          />
        </view>
        <view @click="tianjiagwc()" class="jiarugouwuche">加入购物车</view>
      </view>
    </van-popup>
  </view>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      value: "",
      checked: false,
      activeNames: [],
      activeKey: 0,
      // --------swaper
      point: true,
      autoplay: true,
      interval: 3000,
      duration: 800,
      leftNav: [],
      goodsArr: [],
      banner1: [],
      banner2: [],
      // ----------------
      bsObj: {},
      scrollTop: 0, //右侧滚动高度
      leftTop: 0, //左侧滚动高度
      // ---------购物袋-----------------
      iconTop: "0rpx",
      shopBoxHeight: "80rpx",
      shopArr: [],
      shopScrollShow: false,
      gopayWidth: "200rpx",
      // --------------模态框----------------------
      show: false,
      steppervalue: 0,
      popuplist: [{ price: undefined }],
      items: [
        { value: "冷", checked: "" },
        { value: "热", checked: "" },
        { value: "正常", checked: "" },
      ],
      selVal: [{ sugar: "正常", temperature: "冷" }], //选中的值
      itemstow: [
        { value: "正常", checked: "" },
        { value: "多糖", checked: "" },
        { value: "少糖", checked: "" },
      ],
      d1price: 0,
    };
  },
  computed: {
    isShopArrNone() {
      if (this.shopArr.length == 0) {
        return false;
      } else {
        return true;
      }
    },
    sumPrice() {
      let priceArr = this.shopArr.map((item) => {
        return item.num * item.price;
      });
      let sum = 0;
      priceArr.forEach((item) => {
        sum += item;
      });
      return sum;
    },
    myprice() {
      // let num =  this.d1price * this.steppervalue;
      let num = this.popuplist[0].price * this.steppervalue;
      return num;
    },
  },


  onShow:function(){
    this.checked = getApp().globalData.waimai;
  },

  
  onLoad: function() {
    console.log(this.checked)
    this.checked = getApp().globalData.waimai;
    uni.request({
      url: "http://101.37.175.158:8888/dd",
      success: (res) => {
        this.leftNav = res.data.menu;
        this.banner1 = res.data.item1;
        this.banner2 = res.data.item2;
        let arr = [];
        res.data.goods.map((item, index) => {
          arr.push(
            Object.assign({}, item, {
              reduceShow: false,
              goodsPrice: item.price,
            })
          );
        });
        this.goodsArr = arr;
      },
    });
  },
  onPageScroll: function(e) {
    // console.log(e);
  },
  methods: {
    clone(obj) {
      let newObj = {};
      for (let key in obj) {
        if (typeof obj[key] == "Object") {
          newObj[key] = clone(obj[key]);
        } else {
          newObj[key] = obj[key];
        }
      }
      return newObj;
    },
    myfilter(id) {
      let obj = this.goodsArr.filter((item) => {
        return item.id == id;
      })[0];
      return obj;
    },
    // -----------------------上面是公用函数----------------
    cleanShop() {
      this.shopArr = [];
      this.goodsArr.forEach((item) => {
        (item.num = 0), (item.reduceShow = false);
      });
    },
    onChange() {
      this.checked = !this.checked;
      getApp().globalData.waimai = this.checked;
      console.log(this.checked)
    },
    textShow(e) {
      this.activeNames = e.detail;
    },
    // ------------------------以上是topBox---------------------
    leftItemClick(id) {
      this.activeKey = id;
      // console.log(this.activeKey);
      if (id == 0) {
        this.scrollTop = 0;
      } else if (id == 1) {
        this.scrollTop = 733;
      } else if (id == 2) {
        this.scrollTop = 1154;
      } else if (id == 3) {
        this.scrollTop = 1677;
      } else if (id == 4) {
        this.scrollTop = 2517;
      } else if (id == 5) {
        this.scrollTop = 2939;
      } else if (id == 6) {
        this.scrollTop = 3359;
      } else if (id == 7) {
        this.scrollTop = 3886;
      } else if (id == 8) {
        this.scrollTop = 4304;
      } else if (id == 9) {
        this.scrollTop = 4934;
      } else if (id == 10) {
        this.scrollTop = 5251;
      } else if (id == 11) {
        this.scrollTop = 5975;
      } else {
        this.scrollTop = 6401;
      }
    },
    numPlus(id) {
      let obj = this.myfilter(id);
      obj.reduceShow = true;
      obj.num++;
      let cloneObj = this.clone(obj);
      let flag = this.shopArr.findIndex((item) => item.id == id);
      // console.log(flag);
      if (flag == -1) {
        this.shopArr.push(cloneObj);
      } else {
        this.shopArr[flag].num++;
        this.shopArr[flag].goodsPrice =
          this.shopArr[flag].num * this.shopArr[flag].price;
      }
      // console.log(this.shopArr);
    },
    numReduce(id) {
      let obj = this.myfilter(id);
      if (obj.num > 0) {
        obj.num--;
        if (obj.num == 0) {
          obj.reduceShow = false;
        }
      }
      let cloneObj = this.clone(obj);
      let flag = this.shopArr.findIndex((item) => item.id == id);
      if (this.shopArr[flag].num > 1) {
        this.shopArr[flag].num--;
        this.shopArr[flag].goodsPrice =
          this.shopArr[flag].num * this.shopArr[flag].price;
      } else {
        this.shopArr.splice(flag, 1);
      }
      // console.log(this.shopArr);
    },
    learnMore(id, e) {
      this.shopBoxClose();
      this.bsObj = this.myfilter(id);
      let cloneObj = this.clone(this.bsObj);
      this.show = true;
      this.popuplist[0] = cloneObj;
      this.steppervalue = 0;
      this.steppervalue = 1;
      let arr = [{ sugar: "正常", temperature: "冷" }];
      this.selVal = arr;
      this.items.forEach((item) => {
        item.checked = "";
        this.popuplist[0].temperature == item.value
          ? (item.checked = true)
          : "";
      });
      this.itemstow.forEach((item) => {
        item.checked = "";
        this.popuplist[0].sugar == item.value ? (item.checked = true) : "";
      });
    },
    scroll(e) {
      // this.scrollTop = e.detail.scrollTop;
      let val = e.detail.scrollTop;
      // console.log(val+"===========================")
      if (val < 732) {
        //喜茶实验室------------
        this.activeKey = 0;
        this.leftTop = 0;
      } else if (val > 732 && val < 1153) {
        //共同抗疫
        this.activeKey = 1;
      } else if (val > 1153 && val < 1675) {
        //当季限定
        this.activeKey = 2;
      } else if (val > 1675 && val < 2516) {
        //人气必喝-------------
        this.activeKey = 3;
        this.leftTop = 100;
      } else if (val > 2516 && val < 2938) {
        //喜茶咖啡
        this.activeKey = 4;
      } else if (val > 2938 && val < 3358) {
        //喜茶制冰
        this.activeKey = 5;
      } else if (val > 3358 && val < 3885) {
        //果茶家族--------------
        this.activeKey = 6;
        this.leftTop = 300;
      } else if (val > 3885 && val < 4303) {
        //芝芝名茶
        this.activeKey = 7;
      } else if (val > 4303 && val < 4933) {
        //波波家族
        this.activeKey = 8;
      } else if (val > 4933 && val < 5250) {
        //热饮推荐------------------
        this.activeKey = 9;
        this.leftTop = 500;
      } else if (val > 5250 && val < 5974) {
        //纯茶
        this.activeKey = 10;
      } else if (val > 5974 && val < 6400) {
        //加料
        this.activeKey = 11;
      } else {
        //灵感
        this.activeKey = 12;
      }
    },
    shopBoxShow() {
      //购物袋展开否函数
      this.shopBoxHeight = "350rpx";
      this.iconTop = "-60rpx";
      this.gopayWidth = "100%";
      this.shopScrollShow = true;
    },
    shopBoxClose() {
      this.shopBoxHeight = "80rpx";
      this.iconTop = "0rpx";
      this.gopayWidth = "200rpx";
      this.shopScrollShow = false;
    },
    
    goPay() {
      getApp().globalData.ddsendArr = [...this.shopArr];
      // console.log(getApp().globalData.ddsendArr);
      uni.switchTab({
        url: "/pages/index/dingdan/dingdan",
      });
    },
    // ----------------------下面是模态框的methods-------------
    showPopup() {
      this.show = true;
    },
    bsonClose() {
      this.show = false;
    },
    myplus() {
      this.steppervalue++;
    },
    myminus() {
      this.steppervalue--;
    },
    sugarChoose: function(e) {
      let that = this,
        index = e.currentTarget.dataset.index,
        itemstow = that.itemstow;
      itemstow.forEach(function(v, i) {
        if (index == i) {
          itemstow[index].checked = true;
          that.selVal[0].sugar = itemstow[index].value;
        } else {
          itemstow[i].checked = false;
        }
      });
      this.itemstow = itemstow;
    },
    tmpChoose: function(e) {
      var that = this,
        index = e.currentTarget.dataset.index,
        items = that.items;
      items.forEach(function(v, i) {
        if (index == i) {
          items[index].checked = true;
          that.selVal[0].temperature = items[index].value;
        } else {
          items[i].checked = false;
        }
      });
      this.items = items;
    },
    tianjiagwc() {
      this.show = false;
      let list = this.popuplist[0];
      let obj = {
        id: list.id,
        imgSrc: list.imgSrc,
        hint: list.hint,
        name: list.name,
        price: list.price,
        remark: list.remark,
        sugar: this.selVal[0].sugar,
        temperature: this.selVal[0].temperature,
      };
      Object.assign(obj, { goodsPrice: this.myprice });
      Object.assign(obj, { num: this.steppervalue });
      if (this.shopArr.length === 0) {
        this.shopArr.push(obj);
      } else {
        for (let i = 0; i < this.shopArr.length; i++) {
          if (
            this.shopArr[i].id === obj.id &&
            this.shopArr[i].sugar == obj.sugar &&
            this.shopArr[i].temperature == obj.temperature
          ) {
            this.shopArr[i].goodsPrice += obj.goodsPrice;
            this.shopArr[i].num += obj.num;
            break;
          }
          if (i + 1 == this.shopArr.length) {
            this.shopArr.push(obj);
            break;
          }
        }
      }
      console.log(this.shopArr);
    },
  },
};
</script>

<style scoped>
#topBox {
  position: fixed;
  top: 0;
  width: 100%;
  margin: auto;
  height: 276rpx;
  background-color: white;
  z-index: 2;
}
#placeOnOff {
  display: flex;
  flex-direction: row;
  width: 94%;
  height: 2.5rem;
  margin: auto;
  justify-content: space-between;
}
#placeText {
  height: 2.5rem;
  line-height: 2.5rem;
}
#switch {
  position: relative;
  top: 0.4rem;
}
#moreText {
  font-size: 0.8rem;
}
#contentText {
  width: 100%;
  height: 774rpx;
}
/* - --------------------侧边导航以及饮品展示--------------------------------  */
#mainBox {
  width: 100%;
  height: 1110rpx;
  background-color: white;
}
#topUnderBox {
  width: 100%;
  height: 276rpx;
  background-color: white;
}
#contentBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: 850rpx;
  margin: auto;
}
#leftsidebar {
  width: 23%;
}
#leftNav {
  transition: 0.5s;
  width: 100%;
  height: 850rpx;
  background-color: #f7f8fa;
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
}
.liubaiBox {
  width: 100%;
  height: 200rpx;
}
/* ---------------swaper--------- */
.uni-padding-wrap {
  margin-bottom: 20rpx;
}
.swiper-item {
  width: 100%;
  height: 100%;
  background-color: skyblue;
}
.swiper-item image {
  width: 100%;
  height: 100%;
}
#rightShow {
  width: 77%;
  height: 850rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
  background-color: white;
}
.rightItem {
  width: 100%;
  height: 180rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: white;
  margin: 30rpx 0;
}
.itemImg {
  width: 35%;
  height: 100%;
}
.itemImg image {
  width: 100%;
  height: 100%;
}
/* ---------item里面的内容------------------ */
.itemText {
  width: 60%;
  height: 100%;
  line-height: 45rpx;
}
.itemName {
  font-weight: 600;
  height: 25%;
}
.itemHint {
  font-size: 0.7rem;
  display: inline-block;
  background-color: #f2f3f5;
  padding: 0 10rpx;
  height: 25%;
}
.itemHintReplace {
  height: 25%;
}
.itemRmark {
  color: rgb(139, 139, 139);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 25%;
}
.itemPriceBox {
  font-weight: 600;
  height: 25%;
  position: relative;
}
.stepperNone {
  display: none;
}
.stepper {
  display: block;
  display: inline-block;
  color: black;
  position: absolute;
  right: 0;
  bottom: 0;
}
.symbol {
  display: inline-block;
  width: 40rpx;
  height: 100%;
  font-size: 40rpx;
  background-color: #f2f3f5;
  border-radius: 20rpx;
  text-align: center;
}
.symbol:last-of-type {
  margin: 0 20rpx 0 0;
}
#itemNumBox {
  background-color: #fff;
  margin: 0 15rpx;
  text-align: center;
}
/* ---------------------购物袋------------------------------------ */
#shoppingBox {
  position: fixed;
  width: 100%;
  transition: 0.3s;
  background-color: #f7f8fa;
  left: 0;
  bottom: 0;
  /* position: relative; */
}
#shopIcon {
  position: absolute;
  transition: 0.3s;
  left: 60rpx;
  background-color: #f7f8fa;
}
#shopIcon > image {
  width: 80rpx;
  height: 80rpx;
}
#gopayBtn {
  transition: 0.3s;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 80rpx;
  /* width: 200rpx; */
  text-align: center;
  line-height: 80rpx;
  font-weight: 600;
  color: white;
  background-color: #cfaa79;
}
#shopClose {
  position: absolute;
  font-size: 60rpx;
  right: 30rpx;
  top: 15rpx;
}
#clean {
  font-size: 0.9rem;
  position: absolute;
  right: 20rpx;
  top: 120rpx;
}
#shopArrScroll {
  height: 350rpx;
  width: 70%;
  padding-top: 40rpx;
  display: flex;
  margin: auto;
  flex-direction: column;
}
.shopArrItem {
  margin-bottom: 20rpx;
  width: 100%;
  height: 120rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  border-bottom: 3px solid black;
  padding-bottom: 20rpx;
}
.shopArrItem:last-of-type {
  margin-bottom: 130rpx;
}
.shopItemImg {
  width: 30%rpx;
  height: 100%;
}
.shopArrItem image {
  width: 140rpx;
  height: 100%;
}
.shopItemText {
  width: 75%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 10rpx;
  padding-left: 20rpx;
}
.shopItemPrice {
  font-size: 0.9rem;
  height: 50%;
  margin-right: 8rpx;
  line-height: 60rpx;
}
.fullPrice {
  position: absolute;
  left: 220rpx;
  top: 30rpx;
  font-weight: 600;
}

/* ---------------------模态框css----------------------------- */
.motaiimg {
  width: 100%;
  height: 30%;
}
.imgtitall {
  height: 100%;
}
.titlebox {
  width: 600rpx;
  height: 53%;
  margin: 0 20rpx;
}
.title_name {
  display: block;
  font-weight: bold;
  margin-top: 20rpx;
  margin-bottom: 10rpx;
}
.title_leixing {
  padding: 5rpx;
  display: inline;
  background-color: rgba(216, 216, 216, 0.726);
  font-size: 20rpx;
  color: rgb(122, 122, 122);
  border-radius: 5rpx;
}
.title_miaoshu {
  font-size: 30rpx;
  margin: 10rpx 0 15rpx 0;
  color: rgb(122, 122, 122);
}
.title_neirong {
  font-size: 30rpx;
  color: rgb(139, 139, 139);
}
.footerbox {
  border-top: solid rgb(219, 219, 219) 1rpx;
  height: 17%;
  margin: 0 20rpx;
}
.qian {
  font-size: 30rpx;
  color: rgb(230, 193, 148);
  font-weight: bold;
}
.duoshaoqian {
  display: flex;
  justify-content: space-between;
}
.duoshaoqian_jieshao {
  font-size: 25rpx;
  color: rgb(139, 139, 139);
}
.jiarugouwuche {
  font-size: 25rpx;
  height: 70rpx;
  text-align: center;
  background-color: rgb(230, 193, 148);
  border-radius: 10rpx;
  color: white;
  margin-top: 10rpx;
  line-height: 70rpx;
}
/* ------------------------------------------ */
.danxuanzhuangtai {
  font-size: 30rpx;
  margin: 25rpx 0 15rpx 0;
  color: rgb(122, 122, 122);
}
.list {
  overflow: hidden;
}
.list .li {
  float: left;
  padding: 10rpx 30rpx;
  background-color: rgb(236, 236, 236);
  border-radius: 10rpx;
  font-size: 25rpx;
  color: #5a5858;
  margin-right: 30rpx;
}
.list .li.cur {
  color: white;
  background-color: rgb(230, 193, 148);
}
</style>
